﻿
  <div class="alert alert-info none ie-show">
    部分组件不支持 IE9。
  </div>

  <h4 class="no-margin m-b">自动完成 Autocomplete</h4>
  <div class="panel card wrapper" ng-controller="MDAutocompleteCtrl as ctrl">
    <form ng-submit="$event.preventDefault()">
      <p>使用 <code>md-autocomplete</code> 从本地或远程数据源搜索匹配。</p>
      <md-autocomplete
          ng-disabled="ctrl.isDisabled"
          md-no-cache="ctrl.noCache"
          md-selected-item="ctrl.selectedItem"
          md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
          md-search-text="ctrl.searchText"
          md-selected-item-change="ctrl.selectedItemChange(item)"
          md-items="item in ctrl.querySearch(ctrl.searchText)"
          md-item-text="item.display"
          md-min-length="0"
          placeholder="你最喜欢的奇葩辩手是谁？ (试试马东)">
        <md-item-template>
          <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
        </md-item-template>
        <md-not-found>
          没有找到 "{{ctrl.searchText}}".
        </md-not-found>
      </md-autocomplete>
      <br/>
      <md-checkbox ng-model="ctrl.simulateQuery">模拟查询？ </md-checkbox>
      <md-checkbox ng-model="ctrl.noCache">禁用缓存？ </md-checkbox>
      <md-checkbox ng-model="ctrl.isDisabled">禁止输入?</md-checkbox>

      <p>默认情况下， <code>md-autocomplete</code> 将在缓存中查询结果。  在执行初始调用之后 ，它将使用缓存的结果来消除不必要的服务器请求或查找逻辑。 如需要，你可以禁用缓存。  </p>
    </form>
  </div>

  <h4>按钮 Buttons</h4>
  <div class="panel card wrapper">
    <div class="row">
      <div class="col-sm-6">
        <p>
          <span class="label bg-light">常规</span>
        </p>
        <md-button class="btn-fw m-b-sm">常规按钮</md-button>
        <md-button class="md-primary btn-fw m-b-sm">主要 Primary</md-button>
        <md-button ng-disabled="true" class="md-primary btn-fw m-b-sm">禁用 Disabled</md-button>
        <md-button class="md-warn btn-fw m-b-sm">警告 Warn</md-button>
        <md-button class="md-accent btn-fw m-b-sm">强调 Accent</md-button>
        <md-button md-no-ink class="btn-fw">无</md-button>
        <p>
          <span class="label bg-light">突出</span>
        </p>
        <md-button class="md-raised btn-fw m-b-sm">突出按钮</md-button>
        <md-button class="md-raised md-primary btn-fw m-b-sm">主要 Primary</md-button>
        <md-button ng-disabled="true" class="md-raised md-primary btn-fw m-b-sm">禁用 Disabled</md-button>
        <md-button class="md-raised md-warn btn-fw m-b-sm">警告 Warn</md-button>
        <md-button class="md-raised md-accent btn-fw m-b-sm">强调 Accent</md-button>
      </div>

      <div class="col-sm-6">
        <p>
          <span class="label bg-light">主题</span>
        </p>
        <md-button class="md-primary md-hue-1 btn-fw m-b-sm">主要-色调1</md-button>
        <md-button class="md-warn md-raised md-hue-2 btn-fw m-b-sm">警告-色调2</md-button>
        <md-button class="md-accent btn-fw m-b-sm">强调</md-button>
        <md-button class="md-accent md-raised md-hue-1 btn-fw m-b-sm">强调-色调1</md-button>
        
        <p class="m-t">
          <span class="label bg-light">圆形按钮</span>
        </p>
        <md-button class="md-fab" aria-label="Eat cake">
            <i class="mdi-action-android i-24"></i>
        </md-button>

        <md-button class="md-fab md-primary" aria-label="Use Android">
          <i class="mdi-action-speaker-notes i-24"></i>
        </md-button>

        <md-button class="md-fab" ng-disabled="true" aria-label="Comment">
          <i class="mdi-communication-dialpad i-24"></i>
        </md-button>

        <md-button class="md-fab md-primary md-hue-2" aria-label="Profile">
          <i class="mdi-communication-phone i-24"></i>
        </md-button>
      </div>
    </div>
  </div>

  <h4>对话框 Dialog</h4>
  <div class="panel card wrapper" ng-controller="MDDialogCtrl">
    <p>
      打开一个应用程序对话框。按 Esc 键或单击关闭按钮将返回到触发的按钮。
    </p>

    <div >
      <md-button class="md-primary" ng-click="showAlert($event)">
        消息对话框
      </md-button>
      <md-button class="md-primary" ng-click="showConfirm($event)">
        询问对话框
      </md-button>
        <md-button class="md-raised btn-fw m-b-sm md-warn" ng-click="showAdvanced($event)">
            自定义对话框 （阅读文章并填空）
        </md-button>
    </div>
    
    <br/>
    <b layout="row" layout-align="center center" layout-margin>
      {{alert}}
    </b>
  </div>


  <h4>输入框 Inputs</h4>
  <div class="panel card wrapper" ng-controller="MDInputCtrl">
    <div class="row">
      <md-input-container class="md-primary col-sm-6">
        <label>标题</label>
        <input ng-model="user.title">
      </md-input-container>
      <md-input-container class="col-sm-6">
        <label>邮箱</label>
        <input ng-model="user.email" type="email">
      </md-input-container>
    </div>
    <form name="userForm">

      <md-input-container flex>
        <label>公司 (禁用)</label>
        <input ng-model="user.company" disabled>
      </md-input-container>
    
      <div layout layout-sm="column">
        <md-input-container flex>
          <label>姓氏</label>
          <input ng-model="user.firstName">
        </md-input-container>
        <md-input-container flex>
          <label>姓名</label>
          <input ng-model="theMax">
        </md-input-container>
      </div>

      <md-input-container flex>
        <label>地址</label>
        <input ng-model="user.address">
      </md-input-container>

      <div layout layout-sm="column">
        <md-input-container flex>
          <label>城市</label>
          <input ng-model="user.city">
        </md-input-container>
        <md-input-container flex>
          <label>国家</label>
          <input ng-model="user.state">
        </md-input-container>
        <md-input-container flex>
          <label>邮编</label>
          <input ng-model="user.postalCode">
        </md-input-container>
      </div>

      <md-input-container flex>
        <label>个人简介</label>
        <textarea ng-model="user.biography" columns="1" md-maxlength="150"></textarea>
      </md-input-container>
    </form>
    <h5>表单验证 Errors</h5>
    <form name="projectForm">
      <md-input-container>
        <label>描述</label>
        <input md-maxlength="30" required name="description" ng-model="project.description">
        <div ng-messages="projectForm.description.$error">
          <div ng-message="required">必填</div>
          <div ng-message="md-maxlength">最多输入 30 个字符</div>
        </div>
      </md-input-container>
      <md-input-container>
        <label>姓名</label>
        <input required name="clientName" ng-model="project.clientName">
        <div ng-messages="projectForm.clientName.$error">
          <div ng-message="required">必填</div>
        </div>
      </md-input-container>
      <md-input-container>
        <label>月薪 (单位：元)</label>
        <input required type="number" step="any" name="rate" ng-model="project.rate" min="800" max="24999" required>
        <div ng-messages="projectForm.rate.$error">
          <div ng-message="required">根据<b>《中华人民共和国劳动法》</b>在本公司任职，你必须要有报酬，不能是免费。</div>
          <div ng-message="min">你不能太便宜，至少要800块钱一个月吧朋友，我不想对不起你。</div>
          <div ng-message="max">你不能太贵了老铁，最多24999元每个月，不然我给你打工啦。</div>
        </div>
      </md-input-container>
    </form>
  </div>

  <h4>复选框、单选框以及开关 CheckBox, Radio and Switch</h4>
  <div class="panel card wrapper">
    <div class="row">
      <div class="col-md-4" ng-controller="MDCheckboxCtrl">
        <md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
          复选框1: {{ data.cb1 }}
        </md-checkbox>

        <md-checkbox ng-model="data.cb2" aria-label="Checkbox 2" ng-true-value="'正经'" ng-false-value="'不正经'" class="md-warn">
          复选框2: {{ data.cb2 }}
        </md-checkbox>

        <md-checkbox ng-disabled="true" aria-label="Disabled checkbox" ng-model="data.cb3">
          禁用复选框
        </md-checkbox>

        <md-checkbox ng-disabled="true" aria-label="Disabled checked checkbox" ng-model="data.cb4" ng-init="data.cb4=true">
          禁用且并选中的复选框
        </md-checkbox>

        <md-checkbox md-no-ink aria-label="Checkbox No Ink" ng-model="data.cb5" class="md-primary">
          禁用波纹效果 (很细微的变化，不用管了)
        </md-checkbox>
      </div>

      <div class="col-md-4" ng-controller="MDRadioCtrl">
          <md-radio-group ng-model="data.group2">
              <md-radio-button ng-repeat="d in radioData"
                               ng-value="d.value"
                               ng-disabled=" d.isDisabled ">
                  {{ d.label }}
              </md-radio-button>
          </md-radio-group>
          <p>你选择的是: <span class="radioValue">{{ data.group2 }}</span></p>
          <p>
            <md-button ng-click="addItem()" type="button">添加</md-button>
            <md-button ng-click="removeItem()" type="button">移除</md-button>
          </p>
      </div>

      <div class="col-md-4" ng-controller="MDSwitchCtrl">
        <md-switch ng-model="data.cb1" aria-label="Switch 1">
          开关 1: {{ data.cb1 }}
        </md-switch>

        <md-switch ng-model="data.cb2" aria-label="Switch 2" ng-true-value="'正经'" ng-false-value="'不正经'" class="md-warn">
          开关 2: {{ data.cb2 }}
        </md-switch>

        <md-switch ng-disabled="true" aria-label="Disabled switch" ng-model="disabledModel">
          禁用的开关
        </md-switch>

        <md-switch ng-disabled="true" aria-label="Disabled active switch" ng-model="data.cb4">
          禁用但打开的开关
        </md-switch>

        <md-switch class="md-primary" md-no-ink aria-label="Switch No Ink">
            禁用波纹效果 (很细微的变化，不用管了)
        </md-switch>
        
        <md-switch ng-model="data.cb5" aria-label="Switch 5" ng-change="onChange(data.cb5)">
            change事件: {{ message }}
        </md-switch>
      </div>
    </div>
  </div>

  <h4>滑块 Slider</h4>
  <div class="panel card wrapper" ng-controller="MDSliderCtrl">
    <div class="row">
      <div class="col-sm-6">
        <h5>
          颜色 RGB <span ng-attr-style="border: 1px solid #333; background: rgb({{color.red}},{{color.green}},{{color.blue}})">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </h5>

        <div class="row">
          <div class="col-xs-2 text-center">
            <span class="m-t block l-h-1x">红 R</span>
          </div>
          <div class="col-xs-8">
            <md-slider min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider">
          </md-slider>
          </div>
          <div class="col-xs-2">
            <input type="number" ng-model="color.red" aria-label="red" aria-controls="red-slider" class="m-t-sm form-control input-sm">
          </div>
        </div>

        <div class="row">
          <div class="col-xs-2 text-center">
            <span class="m-t block l-h-1x">绿 G</span>
          </div>
          <div class="col-xs-8">
            <md-slider ng-model="color.green" min="0" max="255" aria-label="green" id="green-slider" class="md-accent">
            </md-slider>
          </div>
          <div class="col-xs-2">
            <input type="number" ng-model="color.green" aria-label="green" aria-controls="green-slider" class="m-t-sm form-control input-sm">
          </div>
        </div>

        <div class="row">
          <div class="col-xs-2 text-center">
            <span class="m-t block l-h-1x">蓝 B</span>
          </div>
          <div class="col-xs-8">
            <md-slider ng-model="color.blue" min="0" max="255" aria-label="blue" id="blue-slider" class="md-primary">
            </md-slider>
          </div>
          <div class="col-xs-2">
            <input type="number" ng-model="color.blue" aria-label="blue" aria-controls="blue-slider" class="m-t-sm form-control input-sm">
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <h5>评级: {{rating1}}/5 </h5>
        <div class="row">
          <div class="col-xs-4 text-center">
            <span class="m-t block l-h-1x">默认颜色 md-default</span>
          </div>
          <div class="col-xs-8">
              <md-slider md-discrete ng-model="rating1" step="1" min="1" max="5" aria-label="rating">
              </md-slider>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4 text-center">
            <span class="m-t block l-h-1x">警告颜色 md-warn</span>
          </div>
          <div class="col-xs-8">
            <md-slider class="md-warn" md-discrete ng-model="rating2" step="1" min="1" max="5" aria-label="rating">
            </md-slider>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4 text-center">
            <span class="m-t block l-h-1x">主要颜色 md-primary</span>
          </div>
          <div class="col-xs-8">
            <md-slider class="md-primary" md-discrete ng-model="rating3" step="1" min="1" max="5" aria-label="rating">
            </md-slider>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6">
        <h5>禁用 Disabled</h5>

        <md-slider ng-model="disabled1" ng-disabled="true" aria-label="Disabled 1"></md-slider>
        <md-slider ng-model="disabled2" ng-disabled="true" aria-label="Disabled 2"></md-slider>
      </div>
      <div class="col-sm-6">
        <h5>禁用、分离小圆点 Disabled, Discrete</h5>

        <md-slider ng-model="disabled1" ng-disabled="true" step="3" md-discrete min="0" max="10" aria-label="Disabled discrete 1"></md-slider>
        <md-slider ng-model="disabled2" ng-disabled="true" step="10" md-discrete aria-label="Disabled discrete 2"></md-slider>
      </div>
    </div>
  </div>

  <h4>栅格系统 Grid</h4>
  <div>
    <md-grid-list
        md-row-height="1:1" md-gutter="8px"
        md-cols-gt-md="6" md-cols-sm="3" md-cols-md="4"
        md-row-height-gt-md="1:1" md-row-height="4:3"
        md-gutter-gt-md="16px" md-gutter-gt-sm="8px" md-gutter="4px">
      <md-grid-tile class="bg-white md-whiteframe-z0"
          md-rowspan="2" md-colspan="2">
          <h5>A</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0">
          <h5>B</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0">
          <h5>C</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0"
          md-colspan="2">
          <h5>D</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0"
          md-rowspan="2" md-colspan="2">
          <h5>E</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0">
          <h5>F</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0">
          <h5>G</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0">
          <h5>H</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0">
          <h5>I</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0">
          <h5>J</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0">
          <h5>K</h5>
      </md-grid-tile>
    </md-grid-list>
  </div>

  <h4>进度条 Progress</h4>
  <div class="panel card wrapper" ng-controller="MDProgressCtrl">
    <h5>常规进度条 Determinate</h5>
    <p>常规进度条是能知道进度完成率的，给出准确的提示，告诉用户已完成了百分之多少。</p>
    <div layout="row" layout-sm="column" layout-align="space-around">
      <md-progress-circular md-mode="determinate" value="{{determinateValue}}"></md-progress-circular>
    </div>

    <h5>无限进度条 Indeterminate</h5>
    <p>无限进度条通常应用于无法确认进度完成率的场景，无需告诉用户已完成了百分之多少，反正就一直在加载或者一直旋转，直到进度完成才停止。 </p>
    <div layout="row" layout-sm="column" layout-align="space-around">
      <md-progress-circular md-mode="indeterminate"></md-progress-circular>
    </div>

    <h5>环形进度条</h5>

    <div layout="row" layout-sm="column" layout-align="space-around">
      <md-progress-circular class="md-hue-2" md-mode="indeterminate"></md-progress-circular>
      <md-progress-circular class="md-accent" md-mode="indeterminate"></md-progress-circular>
      <md-progress-circular class="md-accent md-hue-1" md-mode="indeterminate"></md-progress-circular>
      <md-progress-circular class="md-warn md-hue-3" md-mode="indeterminate"></md-progress-circular>
      <md-progress-circular class="md-warn" md-mode="indeterminate"></md-progress-circular>
    </div>

    <h5>条形进度条</h5>

    <md-progress-linear md-mode="indeterminate" class="m-b"></md-progress-linear>

    <md-progress-linear class="md-warn m-b" md-mode="buffer" value="{{determinateValue}}" md-buffer-value="{{determinateValue2}}">
    </md-progress-linear>

    <md-progress-linear class="md-accent m-b" md-mode="{{mode}}" value="{{determinateValue}}"></md-progress-linear>

  </div>

  <h4>下拉列表 Select</h4>
  <div class="panel card wrapper" ng-controller="MDSelectCtrl">
    <div class="row">
      <div class="col-sm-6">
        <div class="text-info">演示基础使用</div>
        <md-select ng-model="userState" placeholder="国家">
          <md-option ng-repeat="state in states" value="{{state.abbrev}}">{{state.abbrev}}</md-option>
        </md-select>
        <p>{{ userState ? '你选择了 ' + userState : '你还没有选择' }}</p>
      </div>
      <div class="col-sm-6">
          <div class="text-info">演示多选</div>
        <md-select multiple ng-model="multiNeighborhood" placeholder="想去的地方">
          <md-select-label>{{ multiNeighborhood.length ? multiNeighborhood.join('，　') : '请选择一些你想去的地方' }}</md-select-label>
          <md-option ng-value="opt" ng-repeat="opt in neighborhoods">{{ opt }}</md-option>
        </md-select>
        <p class="result">{{ multiNeighborhood ? '你选择了： ' + multiNeighborhood.join('，　') : '你还没有选择想去的地方' }}</p>
      </div>
      <div class="col-sm-6">
          <div class="text-info m-t-lg">演示分组</div>
        <md-select ng-model="favoriteTopping" placeholder="喜欢的食物">
            <md-optgroup label="肉">
                <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: '肉' }">{{topping.name}}</md-option>
            </md-optgroup>
            <md-optgroup label="蔬菜">
                <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: '蔬菜' }">{{topping.name}}</md-option>
            </md-optgroup>
        </md-select>
        <p class="result">{{ favoriteTopping ? '你喜欢的食物是 ' + favoriteTopping : '请选择你喜欢的食物'}}</p>
      </div>
      <div class="col-sm-6">
          <div class="text-info m-t-lg" ">演示加载远程数据</div>
        <md-select ng-model="user" md-on-open="loadUsers()", style="min-width: 200px;">
          <md-select-label>{{ user ? user.name : '分配给用户' }}</md-select-label>
          <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
        </md-select>
        <p class="result">您已将任务分配给： {{ user ? user.name : '未选择' }}</p>
      </div>
    </div>
  </div>

  <h4>抽屉 Sidenav</h4>
  <div class="panel card wrapper pos-rlt" ng-controller="MDSidenavCtrl">
    <section layout="row" flex>
      <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">

        <md-toolbar class="md-theme-indigo">
          <h1 class="md-toolbar-tools">左侧抽屉</h1>
        </md-toolbar>
        <md-content class="md-padding">
          <md-button ng-click="closeLeft()" class="md-primary" hide-gt-md>
            关闭左侧抽屉
          </md-button>
          <p hide-md show-gt-md>
            这个抽屉默认就是打开的。
            示例中已做好设置，当您使用小屏幕浏览时将会有不一样的效果。 
          </p>
        </md-content>

      </md-sidenav>

      <md-content flex class="md-padding">

        <div layout="column" layout-fill layout-align="center center">
          <p>
            这个左侧抽屉在分辨率 >= 960px 时默认就会打开。
          </p>

          <div>
            <md-button ng-click="toggleLeft()"
              class="md-primary" hide-gt-md>
              切换左侧抽屉
            </md-button>
          </div>

          <div>
            <md-button ng-click="toggleRight()"
              class="md-primary">
                切换右侧抽屉
            </md-button>
          </div>
        </div>

      </md-content>

      <md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">

        <md-toolbar class="md-theme-light">
          <h1 class="md-toolbar-tools">右侧抽屉</h1>
        </md-toolbar>
        <md-content class="md-padding">
          <md-button ng-click="closeRight()" class="md-primary">
            关闭右侧抽屉
          </md-button>
        </md-content>

      </md-sidenav>
    </section>
  </div>

  <h4>置顶标题 Subheader</h4>
  <div class="panel card wrapperos-rlt" ng-controller="MDSubheaderCtrl">
    <md-content style="height: 300px;">
      <section>
        <md-subheader class="md-primary b-b">未读消息</md-subheader>
        <md-list layout-padding>
          <md-list-item class="md-3-line" ng-repeat="message in messages">
              <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
              <div class="md-list-item-text">
                <h3>{{message.what}}</h3>
                <h4>{{message.who}}</h4>
                <p>
                  {{message.notes}}
                </p>
              </div>
          </md-list-item>
        </md-list>
      </section>
      <section>
          <md-subheader class="md-warn b-b">过期消息</md-subheader>
        <md-list layout="column" layout-padding>
          <md-list-item class="md-3-line" ng-repeat="message in messages">
            <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
            <div class="md-list-item-text">
              <h3>{{message.what}}</h3>
              <h4>{{message.who}}</h4>
              <p>
                {{message.notes}}
              </p>
            </div>
          </md-list-item>
        </md-list>
      </section>
      <section>
          <md-subheader class=" b-b">已读消息</md-subheader>
        <md-list layout="column" layout-padding>
          <md-list-item class="md-3-line" ng-repeat="message in messages">
            <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
            <div class="md-list-item-text">
              <h3>{{message.what}}</h3>
              <h4>{{message.who}}</h4>
              <p>
                {{message.notes}}
              </p>
            </div>
          </md-list-item>
        </md-list>
      </section>
      <section>
          <md-subheader class="md-accent  b-b">已存档消息</md-subheader>
        <md-list layout="column" layout-padding>
          <md-list-item class="md-3-line" ng-repeat="message in messages">
            <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
            <div class="md-list-item-text">
              <h3>{{message.what}}</h3>
              <h4>{{message.who}}</h4>
              <p>
                {{message.notes}}
              </p>
            </div>
          </md-list-item>
        </md-list>
      </section>
    </md-content>
  </div>

  <h4>选项卡 Tabs</h4>
  <div ng-controller="MDTabCtrl">
    <div class="panel panel-card">
      <div class="wrapper">静态选项卡 Static Tabs</div>
      <md-tabs class="md-primary" md-selected="data.selectedIndex">
        <md-tab id="tab1" aria-controls="tab1-content">
          第一项
        </md-tab>
        <md-tab id="tab2" aria-controls="tab2-content"
                ng-disabled="data.secondLocked">
          {{data.secondLabel}}
        </md-tab>
        <md-tab id="tab3" aria-controls="tab3-content">
          第三项
        </md-tab>
      </md-tabs>

      <ng-switch on="data.selectedIndex">
          <div role="tabpanel"
               id="tab1-content"
               aria-labelledby="tab1"
               ng-switch-when="0"
               md-swipe-left="next()"
               md-swipe-right="previous()"  class="wrapper blue">
              正在浏览第一项<br/>
              <span tooltip="data.selectedIndex = 0">下标 = 0</span>
          </div>
          <div role="tabpanel"
               id="tab2-content"
               aria-labelledby="tab2"
               ng-switch-when="1"
               md-swipe-left="next()"
               md-swipe-right="previous()"  class="wrapper teal">
              正在浏览{{data.secondLabel}}<br/>
              <span tooltip="data.selectedIndex = 1">下标 = 1</span>
          </div>
          <div role="tabpanel"
               id="tab3-content"
               aria-labelledby="tab3"
               ng-switch-when="2"
               md-swipe-left="next()"
               md-swipe-right="previous()"  class="wrapper cyan">
              正在浏览第三项<br/>
              <span tooltip="data.selectedIndex = 2">下标 = 2</span>
          </div>
      </ng-switch>
        <div class="padder">
            <md-checkbox ng-model="data.secondLocked" aria-label="Disabled">
                禁用{{data.secondLabel}}
            </md-checkbox>
        </div>
        <div class="padder">
            <md-input-container>
                <label for="selectedIndex">请选择下标</label>
                <input type="number" id="selectedIndex" ng-model="data.selectedIndex">
            </md-input-container>
        </div>
        
    </div>
    <div class="panel panel-card">
      <md-tabs md-selected="selectedIndex" flex>
        <md-tab ng-repeat="tab in tabs"
                ng-disabled="tab.disabled"
                label="{{tab.title}}">
        <div class="b-t" flex>
        <div class="wrapper tab{{$index%4}}" layout="column" layout-align="space-around center">
            <div ng-bind="tab.content" class="m-b-lg"></div>
              <md-button class="md-primary md-raised" ng-click="removeTab( tab )">
                移除该选项卡项
              </md-button>
          </div>
        </div>
        </md-tab>
      </md-tabs>

      <form ng-submit="addTab(tTitle,tContent)" layout="column" class="b-t p">
        <div layout="row" layout-sm="column" layout-margin >
          <md-input-container>
            <label for="activeIndex">当前页下标</label>
            <input type="text" id="activeIndex" ng-model="selectedIndex" disabled>
          </md-input-container>

          <md-input-container>
            <label for="activeTitle">修改标题</label>
            <input type="text" id="activeTitle" ng-model="tabs[selectedIndex].title">
          </md-input-container>
        </div>

        <div layout="row" layout-sm="column" layout-margin >
          <span class="title m-t-lg m-r-sm">添加新的选项页:</span>
          <md-input-container>
            <label for="label">标题</label>
            <input type="text" id="label" ng-model="tTitle">
          </md-input-container>
          <md-input-container>
            <label for="content">内容</label>
            <input type="text" id="content" ng-model="tContent">
          </md-input-container>
          <md-button class="add-tab md-primary"  type="submit" style="max-height: 32px; margin-top:24px" >添加</md-button>
        </div>
      </form>
    </div>
  </div>

  <h4>消息 Toast</h4>
  <div class="panel card wrapper pos-rlt" ng-controller="MDToastCtrl" id="toast">
    <p>消息可以通过划屏、定时器以及按钮来关闭。</p>

    <div layout="row" layout-sm="column" layout-align="space-around">
      <div style="width:50px"></div>
        <md-button class="md-raised" ng-click="showSimpleToast()">
            显示简单消息
        </md-button>
        <md-button class="md-raised" ng-click="showActionToast()">
            显示带操作的消息
        </md-button>
        <md-button class="md-raised" ng-click="showCustomToast()">
            显示自定义消息
        </md-button>
        <div style="width:50px"></div>
    </div>

      <div>
          <br />
          <b>消息的位置: "{{getToastPositionText()}}"</b>
          <br />
          <md-checkbox ng-repeat="(name, text) in toastPositionText"
                       ng-model="toastPosition[name]">
              {{text}}
          </md-checkbox>
          <md-button class="md-primary md-fab md-fab-bottom-right" tooltip="这个按钮只是用于演示消息对布局的影响">
              按钮
          </md-button>
          <md-button class="md-accent md-fab md-fab-top-right" tooltip="这个按钮只是用于演示消息对布局的影响">
              按钮
          </md-button>
      </div>
  </div>

  <h4>工具提示 Tooltip</h4>
  <div class="panel card wrapper pos-rlt" ng-controller="MDTooltipCtrl">
    <p>
        当鼠标悬停、获得焦点或触摸时，工具提示就会显示。
    </p>

    <md-button class="md-fab md-primary m-r" aria-label="Insert Drive">
      <i class="mdi-editor-insert-drive-file i-24"></i>
      <md-tooltip md-visible="demo.showTooltip">
        新文件
      </md-tooltip>
    </md-button>
    <md-button class="md-fab" aria-label="Photos">
      <i class="mdi-editor-insert-photo i-24"></i>
      <md-tooltip>
        照片
      </md-tooltip>
    </md-button>

    <br/><br/><br/>

    <p>
      <div>
          另外，通过设置工具提示的 md-visible 属性可以编程来显示/隐藏它。<br />
          请尝试点击下面的复选框。
      </div>
    </p>

    <md-checkbox ng-model="demo.showTooltip">
      显示新文件
    </md-checkbox>

  </div>
